<template>
    <div class="search-songs">
      <album-content :songList="listOfSongs"></album-content>
    </div>
  </template>
  
  <script>
  import { mapGetters } from "vuex";
  import { mixin } from "../../mixins";
  import AlbumContent from "../AlbumContent.vue";
  
  export default {
    name: "search-songs",
    components: {
      AlbumContent,
    },
    mixins: [mixin],
    computed: {
      ...mapGetters(["listOfSongs"]),
    },
    methods: {
      // 执行搜索并获取歌曲列表的方法
      performSearch() {
        this.getSong();
      },
    },
    watch: {
      // 监听路由参数的变化
      $route(to, from) {
        // 当路由参数变化时，执行搜索并获取歌曲列表的方法
        this.performSearch();
      },
    },
    mounted() {
      // 在组件挂载时执行一次搜索
      this.performSearch();
    },
  };
  </script>
  
  <style lang="scss" scoped>
  @import '../../assets/css/search-songs.scss';
  </style>
  